<template>
  <div class="basic-layout">
    <Header />

    <main class="layout-content">
      <notice-bar v-if="$route.meta.showNoticeBar" />

      <!-- <keep-alive :include="keepAlive"> -->
      <router-view class="router-view"></router-view>
      <!-- </keep-alive> -->
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";
import NoticeBar from "@/components/NoticeBar";

export default {
  components: {
    Header,
    Footer,
    NoticeBar
  },
  data() {
    return {
      keepAlive: ["Canvass", "TalentCanvass"]
    };
  },
  watch: {
    $route(to, from) {
      if (to.path.split("/").length <= from.path.split("/").length) {
        to.meta.cache && this.addKeepAlive(to.name);

        from.meta.cache && this.removeKeepAlive(from.name);
      }
    }
  },
  methods: {
    removeKeepAlive(name) {
      const index = this.keepAlive.indexOf(name);

      if (index > -1) {
        this.keepAlive.splice(index, 1);
      }
    },
    addKeepAlive(name) {
      const index = this.keepAlive.indexOf(name);

      if (index === -1) {
        this.keepAlive.push(name);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.basic-layout {
  .layout-content {
    padding-top: @header-height;

    .router-view {
      width: @base-width;
      margin: 0 auto;
    }
  }
}
</style>
